<template>
  <div class="intro-container">
    <h1>项目简介:</h1>
    <p>{{intro}}</p>
    <hr>
    <h1>项目目标:</h1>
    <p>{{target1}}</p>
    <p>{{target2}}</p><hr>
    <h1>项目功能:</h1>
    <div v-for="feature in features" class="feature-section">
      <h3>{{feature.title}}</h3>
      <ul>
        <li v-for="item in feature.items" >
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
const intro = ref('角色划分=> 后台管理员，用户')
const target1 = ref('后台管理员：能够对用户管理->分类管理->菜品管理->套餐管理->用户下单的完整流程')
const target2 = ref('用户：能够实现菜品/套餐浏览，下单，支付，查看订单，查看历史订单，等功能')

const features = reactive([
  {title:'后台管理',items:['用户管理','分类管理','菜品管理','套餐管理','订单管理']},
  {title:'用户端',items:['菜品浏览','套餐浏览','添加购物车（清空购物车）','下单','订单查询']}
])
</script>

<style scoped>
.intro-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}
h2 {
  color: #444;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.feature-section {
  margin-top: 15px;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h3 {
  color: #555;
  margin-bottom: 10px;
}
ul {
  padding-left: 20px;
}
li {
  margin-bottom: 5px;
  line-height: 1.5;
}
</style>